<!-- 证书信息 -->
<template>
  <el-dialog
    title="特设证书信息"
    :visible="dialogVisible"
    width="1000px"
    @close="handleClose"
  >
    <!-- 个人信息展示 -->
    <div class="info-grid">
      <div class="info-row">
        <span class="label">姓名</span>
        <span class="value">{{ formData.studentName }}</span>
      </div>
      <div class="info-row">
        <span class="label">联系方式</span>
        <span class="value">{{ formData.phonenumber }}</span>
      </div>
      <div class="info-row">
        <span class="label">单位</span>
        <span class="value">{{ formData.unitName }}</span>
      </div>
      <div class="info-row">
        <span class="label">性别</span>
        <span class="value">{{ formData.sex }}</span>
      </div>
      <div class="info-row">
        <span class="label">通讯地址</span>
        <span class="value">{{ formData.address }}</span>
      </div>
      <div class="info-row">
        <span class="label">学历</span>
        <span class="value">{{ formData.education }}</span>
      </div>
      <div class="info-row">
        <span class="label">邮政编码</span>
        <span class="value">{{ formData.postcode }}</span>
      </div>
      <div class="info-row">
        <span class="label">身份证号</span>
        <span class="value">{{ formData.idNumber }}</span>
      </div>
      <div class="info-row">
        <span class="label">联系方式</span>
        <span class="value">{{ formData.unitPhonenumber }}</span>
      </div>
      <div class="info-row">
        <span class="label">作业种类</span>
        <span class="value">{{ formData.workCategory }}</span>
      </div>
      <div class="info-row">
        <span class="label">作业项目</span>
        <span class="value">{{ formData.workProject }}</span>
      </div>
    </div>

    <!-- 证书信息表单 -->
    <div class="form-grid">
      <div class="form-item">
        <label>证书编号</label>
        <el-input
          v-model="certificate.originalCertificateNo"
          placeholder="请输入证书编号"
        />
      </div>
      <div class="form-item">
        <label>发证单位</label>
        <el-input
          v-model="certificate.issuingAuthority"
          placeholder="请输入发证单位"
        />
      </div>
      <div class="form-item">
        <label>证书有效期起</label>
        <el-date-picker
          v-model="certificate.validityStartTime"
          type="date"
          placeholder="请选择日期"
        />
      </div>
      <div class="form-item">
        <label>证书有效期止</label>
        <el-date-picker
          v-model="certificate.validityEndTime"
          type="date"
          placeholder="请选择日期"
        />
      </div>
    </div>

    <!-- 操作按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitCertificate">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "CertificateInfoDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    userInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        studentName: "",
        phonenumber: "",
        unitName: "",
        sex: "",
        address: "",
        education: "",
        postcode: "",
        idNumber: "",
        unitPhonenumber: "",
        workCategory: "",
        workProject: "",
      },
      certificate: {
        originalCertificateNo: "",
        issuingAuthority: "",
        validityStartTime: null,
        validityEndTime: null,
      },
    };
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
      if (val) {
        this.formData = { ...this.userInfo };
        this.resetForm();
      }
    },
  },
  methods: {
    resetForm() {
      this.certificate = {
        originalCertificateNo: "",
        issuingAuthority: "",
        validityStartTime: null,
        validityEndTime: null,
      };
    },
    submitCertificate() {
      // 验证逻辑可以在这里添加
      this.$emit("submit", { ...this.certificate });
      this.dialogVisible = false;
    },
    // 取消操作
    cancel() {
      this.$emit("update:visible", false);
      this.resetForm();
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped>
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.label {
  width: 80px;
  color: #666;
}

.value {
  flex: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-item label {
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
}

.el-input,
.el-date-editor {
  width: 100%;
}
</style>

